<template>
    <div class="base-tabs">
        <el-tabs style="--el-tabs-header-height: 36px" v-bind:="$attrs">
            <el-tab-pane v-for="item of tabList" :key="item.key" :label="item.label" :name="item.key">
                <div class="h-full w-full">
                    <slot :name="item.key"></slot>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script lang="ts" setup>
/**
 * @ClassName BaseTabs
 * @Description 切换列表
 * @Author xuyizhuo
 * @Date 2024/12/20 21:13
 * @example <BaseTabs v-model="activeItem" :tabList="tabList" @tabChange="onChangeCategory" />
 */
interface TabItem {
    key: string
    label: string
}

defineProps<{ tabList: TabItem[] }>()
</script>

<style lang="scss" scoped>
.base-tabs {
    width: 100%;
    height: 100%;

    :deep(.el-tabs) {
        height: 100%;
        // 标题
        .el-tabs__header {
            margin-bottom: 16px;

            .el-tabs__nav {
                .el-tabs__item {
                    padding-bottom: 4px;
                }
            }
        }

        // 内容
        .el-tabs__content {
            height: calc(100% - 46px);

            .el-tab-pane {
                height: 100%;
            }
        }

        // 左右测布局，不用去除高度
        &.el-tabs--left,
        &.el-tabs--right {
            .el-tabs__content {
                height: 100%;
            }
        }
    }
}
</style>
